import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { EntirePaginationWrapper } from './style'
import { Pagination } from '@mui/material'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchEntireDataAction } from '@/store/modules/entire'

const EntirePagination = memo(({size}) => {
  // store中获取更多界面中当前页码和数据总数
  const {totalCount, currentPage} = useSelector((state) => ({
    totalCount: state.entire.totalCount,
    currentPage: state.entire.currentPage,
  }), shallowEqual)
  const dispatch = useDispatch()
  // 当前页房源第一个 为第几个
  const start = currentPage * size + 1
  // 当前页房源最后一个 为第几个
  const end = start + size - 1
  // 总页码
  const count = Math.ceil(totalCount / size)

  /**
   * 页面切换 修改store中 entire的currentPage数据并且重新请求数据
   * @param {*} e event
   * @param {*} page onChange回掉函数传回当前页码
   */
  function pageChangeHandle(e, page) {
    window.scrollTo(0, 0)
    dispatch(fetchEntireDataAction({page: page - 1, size}))
  }
  return (
    <EntirePaginationWrapper>
        <div className='pagination-content'>
            <Pagination count={count} onChange={pageChangeHandle}/>
            <div className='pagination-info'>{`第${start}-${end}个房源,共超过${totalCount}个`}</div>
        </div>
    </EntirePaginationWrapper>
  )
})

EntirePagination.propTypes = {
    size: PropTypes.number
}

export default EntirePagination